<mat-sidenav-container (backdropClick)="toggleSidenav()" class="container" fxFlex>
  <mat-sidenav #sidenav [mode]="isMobile ? 'over' : 'side'" [opened]="opened | async">
    <nav>
      <mat-list>
        <mat-divider></mat-divider>
        <a mat-list-item routerLink="/dashboard" routerLinkActive="active" (click)="isMobile && sidenav.close()">
          <span>Dashboard</span>
        </a>
        <mat-divider></mat-divider>
        <a mat-list-item (click)="openDialog() && isMobile && sidenav.close()" class="search">
          <span>Search</span>
        </a>
        <a mat-list-item routerLink="/favorites">
          <span>Favorites</span>
        </a>
        <mat-divider></mat-divider>
      </mat-list>
    </nav>
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button class="menu-button" mat-icon-button (click)="toggleSidenav()">
        <mat-icon>menu</mat-icon>
      </button>
      <span>{{title}}</span>
    </mat-toolbar>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>